<template>
  <div>
    <van-nav-bar
      :title="'讨论组'"
      left-arrow
      right-text="创建"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    ></van-nav-bar>

    <div class="list">
      <div class="item" v-for="(item, index) in rooms" :key="index" @click="goRoom(item)">
        <img class="avatar" v-if="item.room_icon" :src="item.room_icon" :alt="item.room_name" />
        <span class="avatar" v-else>
          {{ item.room_name[0] }}
        </span>
        <div class="item-main">
          <div class="item-name">{{ item.room_name }}</div>
        </div>
      </div>
    </div>

    <van-popup class="popup" v-model="show" position="bottom" :style="{ height: '100%' }">
      <van-nav-bar
        title="选择联系人"
        left-text="取消"
        right-text="完成"
        @click-left="show = false"
        @click-right="createRoom"
      />
      <van-checkbox-group v-model="result">
        <van-cell-group>
          <van-cell
            v-for="(item, index) in friend"
            clickable
            :key="item.id"
            :title="`${item.nickname}`"
            @click="toggle(index)"
          >
            <template #icon>
              <van-checkbox class="mr-10" :name="item.id" ref="checkboxes" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
    </van-popup>
  </div>
</template>

<script>
import napi from '@/api/napi'
export default {
  data() {
    return {
      show: false,
      result: [],
      rooms: []
    }
  },

  computed: {
    friend() {
      return this.$store.state.ch.friend
    }
  },

  mounted() {
    napi.getRoomList().then(res => {
      this.rooms = res
    })
  },

  methods: {
    onClickLeft() {
      this.$router.back()
    },
    onClickRight() {
      this.show = true
    },
    toggle(index) {
      this.$refs.checkboxes[index].toggle()
    },
    createRoom() {
      napi.createRoom({ userIds: this.result }).then(res => {
        console.log(res)
      })
    },
    goRoom(item) {
      this.$router.push({
        name: 'chat-item',
        params: {
          partnerId: item.room_key
        },
        query: {
          ...item,
          nickname: item.room_name,
          partner_id: item.id,
          is_group: 1,
          room_id: item.room_key
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.popup {
  // background: #f5f5f5;
}
.toolbar {
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-size: 16px;
  border-bottom: 1px solid #f5f5f5;
}

.item {
  display: flex;
  align-items: center;
  overflow: hidden;
  font-size: 12px;
  padding: 0 10px;
  background-color: #fff;
}

.item-main {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  height: 36px;
  padding: 6px 10px;
  padding-left: 0px;
  &::after {
    position: absolute;
    bottom: 0;
    content: ' ';
    display: block;
    height: 1px;
    width: 100%;
    background: #eee;
    transform: scaleY(0.5);
  }
}

.item-avatar {
  float: left;
  width: 36px;
  height: 36px;
  margin-right: 10px;
  border-radius: 4px;
}

.avatar {
  display: block;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  background: #4772f5;
  border-radius: 50%;
  margin-right: 8px;
  color: #fff;
  font-size: 16px;
}

.item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-msg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #666;
}

.gray {
  color: #666;
  font-size: 12px;
}

.item-name {
  font-size: 14px;
  margin-bottom: 4px;
}
</style>
